<template>
	<!--星星组件-->
	<div id="xx">
		<i @mouseleave="leave" @mouseover="over(i)" @click="set(i)" v-for="i in 5" :class="i<=score?'hx':'xing'"></i>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				score: 1,
				temp:1,
				flag:true
			}
		},
		methods: {
			set(i) {
				this.score = i;
				this.temp = i;
			},
			leave(){
				this.score=this.temp;
				this.flag=true;
			},
			over(i){
				if(this.flag==true){
				this.temp=this.score;
				}else{
					this.flag=false;
				}
				this.score=i;
			}
		}
	}
</script>

<style scoped>
	i {
		display: inline-block;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}
	
	.hx {
		background: url(../../assets/img/geren/hongxing.png);
		}
	
	.xing {
		background: url(../../assets/img/geren/xingxing.png);
	}
</style>